<template>
	<view class="message-container">
		<view class="message-list">
			<view @click="toRead(item, index)" v-for="(item, index) in list.messageList" :key="index" class="message-card">
				<view class="message-header">
					<uni-badge
						class="uni-badge-left-margin"
						:text="Boolean(!item.haveRead)"
						absolute="rightTop"
						:offset="[-2, -2]"
						size="small"
						:is-dot="true"
						:customStyle="{ background: '#6363FF' }">
						<text class="message-title">{{ item.title }}</text>
					</uni-badge>
					<text class="message-time">{{ item.createTime }}</text>
				</view>
				<view class="message-content">
					<text class="message-text">{{ item.content }}</text>
				</view>
			</view>
		</view>
		<loadMore :status="loadingStatus" />
	</view>
</template>

<script lang="ts" setup>
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { useUserStoreToRefs } from "@/store/useUserStore";
const { userInfo } = useUserStoreToRefs();
import { useStudioStoreToRefs } from "@/store/useStudioStore";
let { studio, workSpace } = useStudioStoreToRefs();
import api from "@/api";
onReachBottom(() => {
	console.log(44);
	if (loadingStatus.value == "more") {
		list.page++;
		list.getList();
	}
});
onLoad((data) => {
	uni.setNavigationBarTitle({
		title: data.title
	});
	console.log("data.query", data);
	// 消息类型：1-订单消息  2-系统消息
	list.type = data.conversationType;
	list.getList();
});
const loadingStatus = ref("loading");
const list = reactive({
	type: 1,
	page: 1,
	limit: 10,
	messageList: [],
	getList: async () => {
		const res: any = await api({
			method: "get",
			url: `/mall/appMessage/page`,
			data: {
				type: list.type,
				limit: list.limit,
				page: list.page,
				userId: userInfo.value.id,
				studioId: studio.value.id || ""
			}
		});
		console.log(res);
		list.messageList = list.messageList.concat(res.data.records);
		if (list.messageList.length == 0) {
			loadingStatus.value = "empty";
		} else if (res.data.records.length < 10) {
			loadingStatus.value = "noMore";
		} else {
			loadingStatus.value = "more";
		}
	}
});
const toRead = async (item, index) => {
	// '是否已读 0-未读，1-已读
	if (!item.haveRead) {
		const readRes: any = await api({
			method: "get",
			url: `/mall/appMessage/read`,
			data: {
				id: item.id
			}
		});
		if (readRes.data) {
			list.messageList[index].haveRead = true;
		}
	}
	// redirectType: 1-跳主订单详情, 2-跳日订单列表页 3-陪宠师申请详情页 4-团队详情页 5-工作台页 6-考试记录详情页 7-接单大厅 8-增值服务
	if (item.jsonContent) {
		let jsonContent = JSON.parse(item.jsonContent);
		let url = "";
		console.log(jsonContent);
		switch (Number(jsonContent.redirectType)) {
			
			case 1:
				if (workSpace.value) {
					url = `/pages/studioOrders/orderDetail/index?orderType=-1&id=${jsonContent.orderId}`;
				} else {
					url = `/pages/petsOrder/petsDetails/index?orderType=-1&id=${jsonContent.orderId} `;
				}
				break;
			case 2:
				if (workSpace.value) {
					url = `/pages/studioOrders/orderList/index?orderType=0`;
				} else {
					url = `/pages/petsOrder/petsList/index?orderType=0`;
				}
				break;
			case 3:
				url = `/pages/myStudio/studio/applyForDetails/index?id=${jsonContent.applyId}`;
				break;
			case 4:
				url = `/pages/myStudio/studio/teamDetails/index?petsitterId=${jsonContent.userId}`;
				break;
			case 5:
				url = `/pages/myStudio/index/index`;
				break;
			case 6:
				url = `/pages/businessSchool/examDetails/index?id=${jsonContent.examRecordId}`;
				break;
			case 7:
				url = `/pages/myStudio/index/index?currentPages=1`;
				break;
			case 8:
				if (workSpace.value) {
					url = `/pages/studioOrders/addedServicesDetail/index?id=${jsonContent.orderId}&orderType=-1`;
				} else {
					url = `/pages/petsOrder/addedServicesDetail/index?orderType=-1&id=${jsonContent.orderId} `;
				}
				break;
			case 9:
				url = `/pages/shopping/orderDetailes/index?orderId=${jsonContent.orderId}`;
				break;
		}
		uni.navigateTo({
			url
		});
	}
};
</script>

<style lang="scss" scoped>
.message-container {
	padding-bottom: 56rpx;

	.message-list {
		padding: 26rpx 26rpx 0;

		.message-card {
			background-color: #ffffff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 34rpx;

			.message-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid var(--pages-bg-color);
				padding-bottom: 26rpx;
				margin-bottom: 20rpx;

				.message-title {
					font-size: 16px;
					color: #333333;
					font-weight: 500;
				}

				.message-time {
					flex-shrink: 0;
					font-size: 12px;
					color: #999999;
				}
			}

			.message-content {
				.message-text {
					font-size: 14px;
					color: #666666;
					line-height: 1.5;
					word-break: break-all;
				}
			}
		}
	}
}
</style>
